<!--
 * @Author: zhangmengqiong
 * @Date: 2021-05-12 14:18:00
 * @LastEditors: zhangmengqiong
 * @LastEditTime: 2021-05-13 14:32:14
-->
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=DVPI4kwxgMqXDrTx483rHkB7c3KDRyPp"
    ></script>
    <!-- 封装好的方法 -->
    <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
    <!-- 根据城市名称获取坐标 -->
    <script src="https://mapv.baidu.com/build/mapv.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.124/dist/mapvgl.min.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.119/dist/mapvgl.threelayers.min.js"></script>
    <title>百度地图飞线动画</title>
    <style type="text/css">
      html {
        width: 100%;
        height: 100%;
      }
      body {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
      #map_container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map_container"></div>
    <script type="text/javascript">
      const map = initMapFun();
      const data = initData();
      setData(map, data);
      // 初始化百度地图
      function initMapFun() {
        const cityCenter = mapv.utilCityCenter.getCenterByCityName('厦门');
        var map = initMap({
          center: [cityCenter.lng, cityCenter.lat],
          zoom: 8,
          tilt: 60,
          style: purpleStyle,
        });
        return map;
      }
      function initData() {
        var citys = [
          '厦门',
          '天津',
          '上海',
          '重庆',
          '石家庄',
          '太原',
          '呼和浩特',
          '哈尔滨',
          '长春',
          '沈阳',
          '济南',
          '南京',
          '合肥',
          '杭州',
          '南昌',
          '福州',
          '贵阳',
          '昆明',
          '拉萨',
          '海口',
        ];
        // BezierCurve通过传入起点和终点，生成带高度的贝塞尔曲线坐标集，可以用来生成飞线数据
        var randomCount = 100; // 模拟的飞线的数量
        var data = [];
        // 生成贝塞尔曲线坐标集
        // 1,实例化贝塞尔曲线
        var curve = new mapvgl.BezierCurve();
        // 2,设置起点和重点
        // var start = mapv.utilCityCenter.getCenterByCityName('厦门');
        // var end = mapv.utilCityCenter.getCenterByCityName('北京');
        // curve.setOptions({
        //   start: [start.lng, start.lat],
        //   end: [end.lng, end.lat],
        // });
        // // 3,生成贝塞尔曲线坐标集
        // var curveModelData = curve.getPoints();

        // data.push({
        //   geometry: {
        //     type: 'LineString',
        //     coordinates: curveModelData,
        //   },
        //   properties: {
        //     count: Math.random(),
        //   },
        // });
        // 构造数据
        while (randomCount--) {
          var startPoint = mapv.utilCityCenter.getCenterByCityName(
            citys[parseInt(Math.random() * citys.length, 10)]
          );
          var endPoint = mapv.utilCityCenter.getCenterByCityName(
            citys[parseInt(Math.random() * citys.length, 10)]
          );

          curve.setOptions({
            start: [startPoint.lng, startPoint.lat],
            end: [endPoint.lng, endPoint.lat],
          });
          // 3,生成贝塞尔曲线坐标集
          var curveModelData = curve.getPoints();

          data.push({
            geometry: {
              type: 'LineString',
              coordinates: curveModelData,
            },
            properties: {
              count: Math.random(),
            },
          });
        }
        return data;
      }
      // 绘制数据源
      function setData(map, data) {
        // 初始化图层
        var view = new mapvgl.View({ map });
        // 2,初始化飞线对象
        var flylineLayer = new mapvgl.FlyLineLayer({
          style: 'chaos', // 随机移动
          step: 0.3, // 默认是0.1 越大动画速度越快
          color: 'rgba(33, 242, 214, 0.3)', // 底线颜色
          textureColor: function (data) {
            return data.properties.count > 0.5 ? '#ff0000' : '#56ccdd';
          },
          textureWidth: 20, // 线条宽度
          textureLength: 40, // 飞线占整条线的长度，默认是30%
        });
        // 将飞线添加到图层
        view.addLayer(flylineLayer);
        // 绑定数据源
        flylineLayer.setData(data);
      }
    </script>
  </body>
</html>
